<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元素的样式操作</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 5px solid black;
            }

            .red {
                background-color: red;
            }

            .blue {
                background-color: blue;
            }


        </style>
    </head>
    <body>
        <div class="red"></div>
        <div class="blue"></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>
<script src="lib/jquery.min.js"></script>
<script>

    $.cssHooks["waige"] = {
        get: function () {
            return "666";
        },
        set: function (ele, value) {
            $(ele).html(value);
        }
    };
    //  css(name|pro|[,val|fn]) 获取或者设置元素的css样式
    // 获取匹配的元素集合中的第一个元素的样式的值
//    console.log($('div').css("backgroundColor"));

//    $('div').css("background", "yellow")

//    $('div').css("background", function (index) {
////        console.log(index);
//        if (index == 0) {
//            return "yellow";
//        } else {
//            return "purple";
//        }
//    });

//    $('div').css({
//        width: "400",
//        height: "500px"
//    });

//    $('div').css({
//        width: function (index) {
//            return index * 50 + 300;
//        },
//        height: function (index) {
//            return index * 50 + 50;
//        }
//    });

    $('div').css("background-color", "yellow");
//    throw "waige";
//    console.log($('div').css("waige", "999"));

</script>